<template>
  <div>
    <h1>test 计算属性</h1>
    <input type="text" v-model="firstName" />
    <br />
    <input type="text" v-model="lastName" />
    <br />
    <!-- <input type="text" v-model="fullName" /> -->
    <!-- 要触发事件，每次都要点击一下 -->
    <!-- <button @click="add">fullName</button> -->

    <!-- 自动得到 -->
    <input type="text" v-model="fullName" />
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      firstName: "a",
      lastName: "b"
      //   fullName: ""
    };
  },
  components: {},

  computed: {
    //   getter简写方式
    /*  fullName() {
      return this.firstName + "-" + this.lastName;
    } */
    fullName: {
      get() {
        return this.firstName + "-" + this.lastName;
      },
      //   setter方法监听了该属性
      set(value) {
        console.log(value);
        const arr = value.split("-");
        this.firstName = arr[0];
        this.lastName = arr[1];
      }
    }
  },

  beforeMount() {},

  methods: {
    add() {
      this.fullName = this.firstName + "-" + this.lastName;
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>